<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { doSmsSet, doGetSms } from '@/apis/setting'

const enumServerForm = reactive({
    TENCENT: {
        type: 'TENCENT',
        // 供应商
        providerName: '腾讯',
        // 供应商APPid
        providerAppId: '',
        // 供应商appSecrete
        providerAppSecret: '',
        // 短信签名
        signature: '',
        // 模板信息
        smsTemplate: {},
    },
    ALIYUN: {
        type: 'ALIYUN',
        // 供应商
        providerName: '阿里',
        // 供应商APPid
        providerAppId: '',
        // 供应商appSecrete
        providerAppSecret: '',
        // 短信签名
        signature: '',
        // 模板信息
        smsTemplate: {},
    },
})
const smsTemplateForm = ref(
    // templateName smsTemplateType smsTemplateContent 后端采取默认数据 不会采取前端数据的 所以无需用户填写
    {
        templateName: '禁止用户输入字段',
        templateCode: '',
        smsTemplateType: 'CAPTCHA',
        smsTemplateContent: '您的验证码为 ${code}，请勿告知他人',
    },
)
const currentRadio = ref<'TENCENT' | 'ALIYUN'>('TENCENT')
const currentRadioList = ref<any[]>([
    { name: 'TENCENT', title: '腾讯' },
    { name: 'ALIYUN', title: '阿里' },
])

initForm('TENCENT')

const validFormat = () => {
    return Object.values(enumServerForm[currentRadio.value]).includes('') || Object.values(smsTemplateForm.value).includes('')
}
const submitHandle = async () => {
    if (validFormat()) {
        ElMessage.error('请填写完成表单')
        return
    }
    enumServerForm[currentRadio.value].smsTemplate = { ...smsTemplateForm.value }
    const { code, success } = await doSmsSet(enumServerForm[currentRadio.value])
    if (code === 200 && success) {
        ElMessage.success('保存成功')
        initForm(currentRadio.value)
    } else {
        ElMessage.error('保存失败')
    }
}

const currentUsing = ref('')
async function initForm(val: any) {
    reset()
    const { code, data, success } = await doGetSms(val?.props?.name ? val?.props?.name : val)
    if (code === 200 && success) {
        if (data.conf?.smsTemplate) {
            smsTemplateForm.value = data.conf.smsTemplate
        }
        currentUsing.value = data.using

        Reflect.deleteProperty(data.conf, 'smsTemplate')

        enumServerForm[currentRadio.value] = {
            type: val?.props?.name ? val?.props?.name : val,
            ...data.conf,
        }
    }
}
function reset() {
    smsTemplateForm.value = {
        // templateName smsTemplateType smsTemplateContent 后端采取默认数据 不会采取前端数据的 所以无需用户填写
        templateName: '禁止用户输入字段',
        templateCode: '',
        smsTemplateType: 'CAPTCHA',
        smsTemplateContent: '您的验证码为 ${code}，请勿告知他人',
    }
}
const checkUsing = (str: string) => currentUsing.value === str
</script>

<template>
    <div class="content_container">
        <el-tabs v-model="currentRadio" tab-position="left" style="height: 200px" class="demo-tabs" @tab-click="initForm">
            <el-tab-pane v-for="item in currentRadioList" :key="item.name" :label="item.title" :name="item.name">
                <template #label>
                    <span class="custom-tabs-label">
                        <span>{{ item.title }}</span>
                        <i v-if="item.name === currentRadio" class="iconfont icon-dui-copy" style="font-size: 18px; position: relative; top: 1px"></i>
                    </span>
                </template>
                <el-form label-width="210px">
                    <el-form-item>
                        <template #label> <span style="color: red">*</span>应用ID (providerAppId) </template>
                        <el-input v-model.trim="enumServerForm[currentRadio].providerAppId" class="cusInput" />
                    </el-form-item>
                    <el-form-item>
                        <template #label> <span style="color: red">*</span>应用KEY (providerAppSecret) </template>

                        <el-input v-model.trim="enumServerForm[currentRadio].providerAppSecret" class="cusInput" />
                    </el-form-item>
                    <el-form-item>
                        <template #label> <span style="color: red">*</span>签名内容 (signature) </template>
                        <el-input v-model.trim="enumServerForm[currentRadio].signature" class="cusInput" />
                    </el-form-item>
                    <el-form-item>
                        <template #label> <span style="color: red">*</span>模板ID (templateCode) </template>
                        <el-input v-model.trim="smsTemplateForm.templateCode" class="cusInput" />
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
    <div class="preservation">
        <el-button type="primary" @click="submitHandle">保存</el-button>
    </div>
</template>

<style lang="scss" scoped>
@include b(tab_container) {
    width: 100%;
    height: 100%;
}
@include b(custom-tabs-label) {
    width: 45px;
    text-align: left;
}
@include b(cusInput) {
    width: 300px;
    height: 30px;
}

@include b(btn-icon) {
    position: absolute;
    inset: 0;
}

@include b(text-color) {
    position: relative;
    color: #fff;
    background-color: transparent;
    z-index: 3;
}

@include b(active) {
    background-color: #409eff;
    color: #fff;
    @include b(el-icon) {
        position: absolute;
        top: 0;
        right: 0;
    }
}

@include b(el-radio-group) {
    :deep(.el-radio-button__inner) {
        --el-radio-button-checked-text-color: --el-text-color-regular;
        --el-radio-button-checked-bg-color: #fff;
    }
}

@include b(m-t-20) {
    margin-top: 20px;
}

@include b(el-form-item) {
    :deep(.el-form-item__label) {
        display: flex;
        align-items: center;
    }
}

@include b(label-icon) {
    margin: 0 5px;
    font-size: 18px;
    cursor: pointer;
}
@include b(preservation) {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 52px;
    align-items: center;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}
</style>
